<template>
	<view v-if="loaded" :id="templateId" class="container">
		<!-- 订单列表 -->
		<empty
			:src="baseTemplateFileUri + 'image/emptyStatus/common.png'"
			v-if="!refundsList.length"
		></empty>
		<template v-else>
			<!-- 售后列表 begin -->
			<view
				v-for="(item, index) in refundsList"
				:key="index"
				class="order-item"
				@click="seeDetails(item.refundsId)"
			>
				<view class="i-top">
					<text class="time">{{ item.insTime }}</text>
					<text :style="themeStyles.textMainColor" class="state">{{
						item.statusValue
					}}</text>
				</view>

				<!-- 商品区域 begin -->
				<view class="goods-list">
					<uni-goods-col
						v-for="(goodsItem, goodsIndex) in item.refundGoodsList"
						:key="goodsIndex"
						:goods="goodsItem"
						:goodsPrice="goodsItem.priceStr.split('.')"
						:goodsTypeText="goodsItem.skuName"
						:latePrice="goodsItem.priceOut"
					>
						<view slot="metaRight">
							<view class="goods-item-num"
								>x{{ goodsItem.refundsNumber }}</view
							>
						</view>
					</uni-goods-col>
				</view>
				<!-- 商品区域 end -->

				<view class="price-box">
					<text class="num"
						>共{{ item.goodsNum }}件商品 预计退款</text
					>
					<view class="cut-price">
						<text class="price">{{
							item.applyMoney[0] || "0"
						}}</text>
						<text class="decimal">{{
							item.applyMoney[1] || "00"
						}}</text>
					</view>
				</view>

				<view class="action-box">
					<button
						v-if="viewBtn(item.status, 1)"
						@click.stop="onCancelRefunds(item.refundsId)"
						class="action-btn"
					>
						撤销申请
					</button>
					<button
						v-if="viewBtn(item.status, 2)"
						@click.stop="
							navTo(
								`/pages/user/pages/logistics/fill?refundsId=${item.refundsId}`
							)
						"
						:style="themeStyles.btnAuxiliaryColor"
						class="action-btn"
					>
						填写物流
					</button>

					<!-- <button
            v-if="viewBtn(item.status, 3)"
            @click.stop="applyAgain(item)"
            :style="themeStyles.btnAuxiliaryColor"
            class="action-btn"
          >再次申请</button> -->

					<button
						v-if="
							item.refundsType === 10 && viewBtn(item.status, 4)
						"
						@click.stop="
							navTo(
								`/pages/user/pages/logistics/logistics?singleNumber=${item.logisticsNo}`
							)
						"
						:style="themeStyles.btnAuxiliaryColor"
						class="action-btn recom"
					>
						查看物流
					</button>
					<!-- <button v-if="viewBtn(item.status, 4)" @click.stop="nowPay(item.refundsId)" class="action-btn recom">再次购买</button> -->
				</view>
			</view>
			<!-- 售后列表 end -->
			<uni-load-more :status="loadingType"> </uni-load-more>
		</template>
	</view>
</template>

<script>
/** api begin */
import { qeuryRefundsList } from "@/lib/api/refundsServer/info";
/** api end */

import refundsMixin from "@/mixins/afterSale/refunds";
/** components begin */
import uniGoodsCol from "@/components/goods/uniGoodsCol";
import uniLoadMore from "@/components/uniLoadMore/uniLoadMore";
import empty from "@/components/empty";
/** components end */

let currentPage = 1;
export default {
	mixins: [
		refundsMixin
	],
	components: {
		uniLoadMore,
		uniGoodsCol,
		empty
	},
	data() {
		return {
			loadingType: "more",
			refundsList: []
		};
	},
	onLoad(option) {
		currentPage = 1;
		this.getRefundsList();
	},

	onShow() {},

	//下拉刷新
	onPullDownRefresh() {
		Object.assign(this.$data, this.$options.data());
		currentPage = 1;
		this.getRefundsList();
	},

	// 上拉加载
	onReachBottom() {
		console.log("this.loadingType", this.loadingType);
		if (this.loadingType === "loading" || this.loadingType === "noMore") {
			return;
		}
		currentPage++;
		this.getRefundsList();
	},

	methods: {
		resetData() {
			Object.assign(this.$data, this.$options.data());
			currentPage = 1;
			this.getRefundsList();
		},

		async onCancelRefunds(id) {
			try {
				await this.cancelRefunds(id);
				Object.assign(this.$data, this.$options.data());
				this.getRefundsList();
			} catch (error) {
				console.log("error", error);
				this.$api.showToast(error.resultInfo || 操作失败);
			}
		},

		async getRefundsList() {
			this.loadingType = "loading";
			const propsData = {
				currentPage
			};
			try {
				const res = await qeuryRefundsList(propsData);
				res.data.list.length &&
					res.data.list.forEach((item, index) => {
						res.data.list[
							index
						].applyMoney = `${item.applyMoney}`.split(".");
					});

				if (currentPage === 1) {
					this.refundsList = res.data.list;
				} else {
					this.refundsList = this.refundsList.concat(res.data.list);
				}

				const noMore =
					!res.data.total ||
					this.refundsList.length >= res.data.total;
				this.loadingType = noMore ? "noMore" : "more";

				this.loaded = true;
			} catch (error) {
				console.log("error", error);
				this.loaded = true;
				this.$api.showToast(error.resultInfo || "出错了* _ *");
			}
			uni.stopPullDownRefresh();
		},

		// 查看详情
		seeDetails(refundsId) {
			console.log("---退款---refundsId---",refundsId);
			//return;
			this.applicationRefundsData.applied = true;
			this.applicationRefundsData.refundsId = refundsId;
			console.log(
				"this.applicationRefundsData",
				this.applicationRefundsData
			);
			uni.navigateTo({
				url: `/pages/user/pages/afterSale/refundsDetail?refundsId=${refundsId}`
			});
		}
	}
};
</script>

<style lang="scss">
page,
.container {
	background: $theme-main-bg-color;
	padding-top: 24rpx;
	height: 100%;
}

@import "@/common/styles/order/orderList.scss";
</style>
